<template>
  <div :class="$style.wrapper">
    <div :class="$style.left">
      <div :class="$style.logo">
        <img :class="$style.image" alt="logo" v-bind:src="currentUser && currentUser.enterprise.enterpriseLogo">
      </div>
      <div :class="$style.label">{{label}}</div>
    </div>
    <div :class="$style.right">
      <el-popover
        placement="bottom"
        trigger="click"
        width="400">
        <el-button @click="logout">退出</el-button>
        <div :class="$style.userInfo" slot="reference">
          <img :class="$style.image" alt="" src="/images/user.png">
          <span :class="$style.username">{{currentUser && currentUser.userName}}</span>
        </div>
      </el-popover>
      <el-select style="margin-right: 20px;" v-model="roleId">
        <el-option :key="role.id" :label="role.roleName" :value="role.roleID" v-for="role in roles">
        </el-option>
      </el-select>
      <el-select @change="themeChangeHandle" v-model="currentTheme">
        <el-option :key="index" :label="theme.label" :value="theme.value" v-for="(theme,index) in themes">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import vpJson from './../../../view-id-page';
import api from './../../../common/js/api';

const changeTheme = (theme) => {
  Array.prototype.slice.call(document.head.children).forEach(item => {
    if (item.tagName === 'LINK' && item.href.indexOf('theme-') > -1) {
      item.href = item.href.replace(/theme-.+/, theme + '.css');
    }
  });
  let appDom = document.querySelector('#app');
  appDom.className = appDom.className.replace(/theme-.+/, theme);
};
export default {
  name: 'PsHead',
  data () {
    return {
      roleFormat: {
        value: 'roleID',
        label: 'roleName'
      },
      currentTheme: 'theme-default',
      themes: [{
        value: 'theme-default',
        label: '默认皮肤'
      }, {
        value: 'theme-dark',
        label: '皮肤1'
      }, {
        value: 'theme-blue',
        label: '皮肤2'
      }]
    };
  },
  computed: {
    ...mapState('user', [
      'currentUser'
    ]),
    ...mapGetters('role', [
      'currentRole'
    ]),
    roleId: {
      get () {
        return this.$store.getters['role/currentRole'] && this.$store.getters['role/currentRole'].roleID;
      },
      set (value) {
        let user = Object.create(this.currentUser);
        user.userCurrentRoleID = parseInt(value);
        this.$store.commit('user/setCurrentUser', user);
        localStorage.setItem('roleId', value);

        let currentRolePermission = JSON.parse(this.currentRole.values);
        let firstChild = currentRolePermission.children[0];
        if (firstChild.children && firstChild.children.length > 0) {
          console.error('Error');
        } else {
          let viewId = vpJson[firstChild.viewId] || firstChild.viewId;
          this.$router.push(`/app-sc/Main/${firstChild.showTree}/${this.currentUser.domainIds}/0/${viewId}`);
        }
      }
    },
    roles () {
      return this.$store.state.role.allRoles.filter(role => {
        if (role.roleID == 100) {
          return false;
        }
        return this.$store.state.user.currentUser.roleID.indexOf(role.roleID) > -1;
      });
    },
    label () {
      let value = {};
      if (this.$store.state.config.enterpriseConfig && this.$store.state.config.enterpriseConfig[0]) {
        try {
          value = JSON.parse(this.$store.state.config.enterpriseConfig[0].value);
        } catch (e) {
          console.error('enterprise config cannot convert JSON object.');
        }
      }
      return value['F02'] ? (value['F02'].label || '服务中心') : '服务中心';
    }
  },
  mounted () {
    let currentTheme = localStorage.getItem('_CURRENT_THEME_');
    if (!currentTheme) {
      localStorage.setItem('_CURRENT_THEME_', 'theme-default');
      currentTheme = 'theme-default';
    }
    this.currentTheme = currentTheme;
    changeTheme(this.currentTheme);
  },
  methods: {
    logout () {
      api.post('userLoginUIService.logout', null).then(ret => {
        if (ret != null && ret !== '' && ret.code == 0) {
          window.location.href = '/login/login.html';
        }
      });
    },
    themeChangeHandle (theme) {
      localStorage.setItem('_CURRENT_THEME_', theme);
      changeTheme(theme);
    }
  }
};
</script>
<style lang="scss" module>
@import "./../../../style/default/head.scss";
</style>
